@import './com';

header{
    display: flex;
    flex-direction: column;
    align-items: center;
    .h_top{
        position: relative;
        width: vw(750);
        height: vw(124);

     // 头部内容
        >ul{
            height: vw(124);
            position: absolute;
            top: vw(50);
            left: vw(23);
            font-size: vw(26);
            width: vw(705);
            height: vw(57);
            @extend .flex;
            align-items: center;
            
            >li:first-of-type{
                display: flex;
                align-items: center;
                justify-content: center;
                width: vw(123);
                height: vw(57);
                border: vw(1) solid $col;
                border-radius: vw(20);
            }
            >li:last-of-type{
             
                >img{
                    width: vw(60);
                    height: vw(55);
                }
            }
         
    }
   
 }
//  头像
 >.top1{
   @extend .flex;
    width: vw(710);
    height: vw(170);
    align-items: center;
    >div{
       display: flex;
       justify-content: space-between;
        width: vw(505);
        height: vw(95);
        >ul{
            @extend .flex;
            flex-direction: column;
            >h5{
                font-size: vw(30);
            }
            >li:last-child{
                font-size: vw(26);
                color: #9d9d9d;
            }
        }
        >h5{
            display: flex;
            align-items: center;
            font-size: vw(88);

        }
    }
    > img{
         width: vw(170);
         height: vw(170);
     }
   
  }
//   图片
  .top2{
      margin-top: vw(27);
      width: vw(705);
      @extend .flex;
      height: vw(150);
     >p{
         display: flex;
         justify-content: space-evenly;
         flex-direction: column;
         align-items: center;
         font-size: vw(26);
        width: vw(195);
        height: vw(150); 

      
      }
      >p:first-child{
          background-color: #b2e0a0;
          >img{
                width: vw(78);
                height: vw(80);
        }
      }
      >p:nth-child(2){
          background-color: #b2e0a0;
          >img{
            width: vw(84);
            height: vw(80);
    }
      }
      >p:nth-child(3){
        background-color: #e0b7a0;
        >img{
            width: vw(129);
            height: vw(74);
    }
    }

      
 
  }
}


main{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    margin-top: vw(35);
    width: vw(705);
    >.m_more{
        @extend .flex;
        flex-direction: column;

        width: vw(705);
        height: vw(360);
              
        >ul{
            @extend .flex;
            align-items: center;
            width: vw(705);
            height: vw(70);
            >li{
               
                >span{
                    font-size: vw(26);
                }

            }
            >li:last-child{
                @extend .flex;
                width: vw(610);
                height: vw(26);
                >a{
                    >span{
                        margin-right: vw(5);
                        font-size: vw(24);
    
                    }
                    >img{
                        width: vw(24);
                        height: vw(24);
                        vertical-align: middle;
                    }
                }
             
            }
          
        }
        >ul:first-child li img{
            
                width: vw(55);
                height: vw(70);
                vertical-align: middle;
            
        }
        >ul:nth-child(2) li img{
            width: vw(70);
            height: vw(75);
            vertical-align: middle;
    }
    >ul:nth-child(3) li img{
        width: vw(92);
        height: vw(60);
        vertical-align: middle;
     }
         >ul:nth-child(4) li img{
    width: vw(60);
    height: vw(60);
    vertical-align: middle;
      }
    


    }
    .m_more1{
        margin-top: vw(77);
        @extend .flex;
        flex-direction: column;
        width: vw(702);
        height: vw(162);
        ul{
            @extend .flex;
            align-items: center;
            width: vw(704);
            height: vw(77);
            >li{
               
                >span{
                    font-size: vw(26);
                }

            }
            >li:last-child{
                @extend .flex;
                width: vw(610);
                height: vw(26);
                >a{
                    >span{
                        margin-right: vw(5);
                        font-size: vw(24);
    
                    }
                    >img{
                        width: vw(24);
                        height: vw(24);
                        vertical-align: middle;
                    }
                }
             
            }
        }

        >ul:nth-child(1) li img{
            width: vw(80);
            height: vw(77);
            vertical-align: middle;
               }
               >ul:nth-child(2) li img{
                width: vw(77);
                height: vw(60);
                vertical-align: middle;
                   }
        
    }
    .login{
        margin-top: vw(37);
        width: vw(540);
        height: vw(75);
        @extend .flex;
        align-items: center;
        >a{
            line-height: 37px;
            color: #fff;
            font-size: vw(24);
            text-align: center;
            display: inline-block;
            width: vw(148);
            height: vw(75);
            background-color: $col;
            border-radius: 37px;
        }
    }
}



 // 底部导航栏
 nav{

    @extend .sticky;

    >.bt{
        width: vw(750);
        height: vw(135);
        display: flex;
        justify-content: space-around;
    
        >p{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: vw(73);
            font-size: vw(26);
            img{
                width: vw(73);
                height: vw(73);
            }
            span{
                display: flex;
                justify-content: center;
            }
            
        }
    }
   
}